<template>
  <div id="flight-orders">
    <div class="card">
      <div class="card-body small">
        <form class="" id="frmSearch">
          <input
            type="hidden"
            id="frmSearch_sc_pageNo"
            name="sc.pageNo"
            v-model="sc.pageNo"
          />
          <input
            type="hidden"
            id="frmSearch_sc_pageSize"
            name="sc.pageSize"
            v-model="sc.pageSize"
          />

          <my-date-picker
            id="beginDate"
            v-model="beginDate"
            name="sc.beginDate"
            placeholder="开始日期"
          ></my-date-picker>
          <my-date-picker
            id="endDate"
            v-model="endDate"
            name="sc.endDate"
            placeholder="截止日期"
          ></my-date-picker>
          <input
            type="text"
            class="form-control"
            placeholder="出票单号"
            size="10"
            v-model.trim="orderId"
          />
          <input
            type="text"
            class="form-control"
            placeholder="政策代码"
            size="10"
            v-model.trim="policyCode"
          />
          <select class="form-select" v-model.number="status">
            <option value="-1">所有</option>
            <option value="1">未出票</option>
            <option value="3">出票成功</option>
            <option value="5">已作废</option>
          </select>
          <button
            type="button"
            id="btnSearch"
            class="btn btn-primary ms-2"
            @click.stop="search()"
          >
            查找
          </button>
          <button
            type="button"
            class="btn btn-secondary btn-sm ms-2"
            @click.stop="reset()"
          >
            重置
          </button>

          <button
            type="button"
            class="btn btn-info btn-sm ms-5"
            @click.stop="syncTbookingOrders(0)"
          >
            同步所有
          </button>
          <button
            type="button"
            class="btn btn-info btn-sm ms-1"
            @click.stop="syncTbookingOrders(1)"
          >
            同步未出票
          </button>
        </form>
      </div>
    </div>
    <table class="table table-response table-sm table-striped table-hover">
      <thead>
        <th>出票单号</th>
        <th>简述</th>
        <th>状态</th>
        <th>行程/人数</th>
        <th>创建时间</th>
        <th>政策ID</th>
        <th>政策代码</th>
        <th>认领人</th>
        <th></th>
      </thead>
      <tbody>
        <template v-for="info in dataList">
          <tr :key="info.id">
            <td>{{ info.orderId }}</td>
            <td>{{ info.orderDesc }}</td>
            <td>{{ getOrderStatus(info.orderStatus) }}</td>
            <td>{{ getFlightWayDesc(info.flightWay) }}/{{ info.itemCount }}</td>
            <td>{{ info.orderDateTime }}</td>
            <td>{{ info.policyId }}</td>
            <td>{{ info.policyCode }}</td>
            <td>{{ info.operator }}</td>
            <td>
              <router-link :to="`/tbooking/order/` + info.id">详情</router-link>
            </td>
          </tr>
        </template>
      </tbody>
    </table>

    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { searchTbookingOrders } from "@/api/tbooking.js";
import { syncTbookingOrders } from "@/api/admin.js";
import MyDatePicker from "@/components/my-datepicker.vue";
import MyPagination from "@/components/my-pagination.vue";

export default {
  components: {
    MyDatePicker,
    MyPagination,
  },
  data() {
    return {
      dataList: [],

      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 20,
        pageTotal: 0,
      },

      beginDate: "",
      endDate: "",
      status: -1,
      orderId: "",
      policyCode: "",
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      let y = 0;
      const x = parseInt(this.orderId);
      if (isNaN(x) === false) {
        y = x;
      }

      this.showLoading();

      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.endDate": this.endDate,
        "sc.status": this.status,
        "sc.orderId": y,
        "sc.policyCode": this.policyCode,
      };
      searchTbookingOrders(
        params,
        (jsonResult) => {
          this.dataList = jsonResult.dataList;
          this.sc = jsonResult.page;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    syncTbookingOrders: function (syncMode) {
      this.showLoading();
      syncTbookingOrders(syncMode, (v) => {
        this.hideLoading();
        if (v.status === "OK") {
          this.showErrMsg(v.desc);
        } else {
          this.showErrMsg("没有更新");
        }
      });
    },
    getOrderStatus: function (status) {
      switch (status) {
        case "1":
          return "未出票";
        case "2":
          return "自动出票失败";
        case "3":
          return "出票成功";
        case "4":
          return "已取消";
        case "5":
          return "已作废";
        case "6":
          return "已入库";
        case "7":
          return "已支付";
        case "8":
          return "验证中";
        default:
          return status;
      }
    },
    getFlightWayDesc: function (val) {
      switch (val) {
        case "1":
          return "单程";
        case "2":
          return "往返";
        case "3":
          return "联程";
        case "4":
          return "多程";
        default:
          return val;
      }
    },
    reset: function () {
      this.status = -1;
      this.sc.pageNo = 1;
      this.beginDate = "";
      this.endDate = "";
      this.orderId = "";
      this.policyCode = "";
      this.search();
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>